import { Component, ViewEncapsulation } from '@angular/core';
import { ICellRendererAngularComp } from '@ag-grid-community/angular';
import { ExpressionService } from '@core/services/expression/ExpressionService';
import { deepClone } from '../../../utils/utils';

@Component({
  selector: 'apes-render-tooltip',
  template: `
    <ng-container *ngIf="!_showHidden">
      <div class="render-tooltip"
           apes-tooltip
           [apesMouseEnterDelay]="tooltipEnterDelay"
           [apesMouseLeaveDelay]="tooltipLeaveDelay"
           [apesTooltipTitle]="titleTemplate">
        {{formatter(params.value)}}
      </div>
      <ng-template #titleTemplate>
        <div [innerHTML]="getTooltipFormatter()"></div>
      </ng-template>
    </ng-container>
    <ng-container *ngIf="_showHidden">
      <div *ngIf="!params.column['colDef'].showHidden"
           class="render-tooltip">
        {{showHidden(params.value)}}
      </div>
      <div *ngIf="params.column['colDef'].showHidden"
           class="render-tooltip"
           apes-tooltip
           [apesMouseEnterDelay]="tooltipEnterDelay"
           [apesMouseLeaveDelay]="tooltipLeaveDelay"
           [apesTooltipTitle]="titleTemplate">
        {{showHidden(params.value)}}
      </div>
      <ng-template #titleTemplate>
        <div [innerHTML]="getTooltipFormatter()"></div>
      </ng-template>
    </ng-container>
  `,
  styles: [
      `
      /*:host {*/
      /*  position: absolute;*/
      /*  width: 200px;*/
      /*  height: 70px;*/
      /*  border: 1px solid cornflowerblue;*/
      /*  pointer-events: none;*/
      /*  transition: opacity 1s;*/
      /*}*/
    `,
  ],
})
export class RenderTooltipComponent implements ICellRendererAngularComp {
  params: any;
  apesConfig: any;
  tooltipFormatter: any = null;
  _showHidden: boolean = false;

  ctx: any = {};
  data: any = {};
  colKey: any = '';

  tooltipEnterDelay: any = 0.15;
  tooltipLeaveDelay: any = 0.1;
  valueFormatter = '';

  constructor(
    private expressionService: ExpressionService,
  ) {
  }

  refresh(params: any): boolean {
    return false;
  }

  agInit(params): void {
    this.params = params;
    this.ctx = params.context;
    this.apesConfig = this.extend(params);

    if (params.context) {
      this.ctx = params.context;
    }

    if (this.params.hasOwnProperty('colDef')) {
      this.data = this.params.data;
      this.colKey = this.params.colDef.field;
      this.valueFormatter = this.params.colDef['valueFormatter'];
      this.tooltipFormatter = this.params.colDef.tooltipFormatter;
      this.tooltipEnterDelay = this.params.colDef['tooltipEnterDelay'] ? this.params.colDef['tooltipEnterDelay'] : 0.15;
      this.tooltipLeaveDelay = this.params.colDef['tooltipLeaveDelay'] ? this.params.colDef['tooltipLeaveDelay'] : 0.1;
    } else {
      this.data = this.params.node.data;
      this.colKey = this.params['column']['colDef'].field;
      this.valueFormatter = this.params['column']['colDef']['valueFormatter'];
      this.tooltipFormatter = this.params['column']['colDef'].tooltipFormatter;
      this.tooltipEnterDelay = this.params['column']['colDef']['tooltipEnterDelay'] ? this.params['column']['colDef']['tooltipEnterDelay'] : 0.15;
      this.tooltipLeaveDelay = this.params['column']['colDef']['tooltipLeaveDelay'] ? this.params['column']['colDef']['tooltipLeaveDelay'] : 0.1;
    }
    if (this.params.column['colDef'].hasOwnProperty('showHidden')) {
      this._showHidden = true;
    }
  }

  extend(data: any) {
    let result = {};
    for (let key in data) {
      let value = data[key];
      if (key === 'context') {
        result['ctx'] = value;
      } else {
        result[key] = value;
      }
    }
    return result;
  }

  getTooltipFormatter(): string {
    let value = this.params.value;
    let expression = this.tooltipFormatter || 'value';
    return this.expressionService.evaluate(expression, {
      context: this.ctx,
      model: this.ctx['model'],
      data: this.data,
      value: value,
    });
  }

  showHidden(value) {
    let show;
    let showHidden = this.params.column['colDef'].showHidden;
    if (showHidden) {
      show = value;
    } else {
      show = '****';
    }
    return show;
  }

  formatter(value: any) {
    let expression = this.valueFormatter || 'value';
    return this.expressionService.evaluate(expression, {
      context: this.ctx,
      model: this.ctx['model'],
      data: this.data,
      value: value,
    });
  }
}
